@import "./common.scss";

@mixin btnOrange {
  width: getvw(110);
  height: getvw(60);
  border-radius: getvw(60);
  background-color: #ff9344;
  color: #fff;
  font-size: getfs(30);
  text-align: center;
  line-height: getvw(60);
  border: none;
}
.wrap {
  header {
    .iconStareBox {
      width: getvw(60);
      .iconStartBig {
        font-size: getfs(60);
        color: #ff9344;
      }
    }
  }
  main {
    .detail-product {
      width: 100%;
      height: getvw(160);
      .pro-row-1 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .row_left {
          span {
            font-size: getfs(62);
            color: #ff9344;
          }
        }
        .row_right {
          button {
            @include btnOrange;
          }
        }
      }
      .pro-row-2 {
        margin-top: getvw(50);
        display: flex;
        justify-content: space-between;
        .row_left {
          .iconStareSmall {
            color: #ff9344;
            font-size: getfs(35);
          }
          span {
            font-size: getfs(30);
            color: #000;
          }
          span:nth-of-type(2) {
            font-size: getfs(30);
            color: #ff9344;
          }
        }
        .row_right {
          a {
            font-size: getfs(28);
            color: #999;
          }
        }
      }
    }
    .suitMer {
      margin-top: getvw(20);
      width: 100%;
      .suit-title {
        box-sizing: border-box;
        padding: 0 getvw(10);
        width: 100%;
        height: getvw(70);
        background-color: #ff9344;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2,
        span {
          font-size: getfs(32);
          font-weight: 600;
          color: #fff;
        }
      }
      .suitItems {
        width: 100%;
        .suit-item {
          margin-top: getvw(10);
          width: 100%;
          height: getvw(180);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .suit-item-left {
            position: relative;
            width: getvw(175);
            height: getvw(175);
            span {
              position: absolute;
              bottom: getvw(45);
              left: 0;
              width: 100%;
              height: getvw(40);
              background-color: rgba(#fff, 0.5);
              color: #000;
              font-size: getfs(34);
              text-align: center;
            }
          }
          .suit-item-mid {
            width: getvw(350);
            h3 {
              font-size: getfs(30);
              font-weight: bold;
            }
            .iconBox {
              margin: getvw(15) 0;
              color: #999;
              font-size: getfs(26);
              .iconStareSmall {
                font-size: getfs(30);
                color: #ff9344;
              }
            }
            p {
              color: #929292;
              font-size: getfs(26);
              margin-bottom: getvw(20);
            }
            a {
              color: #ff9344;
              font-size: getfs(20);
            }
          }
          .suit-item-right {
            button {
              @include btnOrange;
            }
          }
        }
      }
    }
  }
}
